<template>
    <div class="page">
        <div class="container">
            <div class="message-head">
                <div class="tit">消息中心</div>
            </div>

            <div class="tab-list">
                <div class="tab-item" :class="{ active: activeTab == item.value }" v-for="item in tabList" :key="item.value"
                    @click="onTabClick(item)">
                    {{ item.label }}
                </div>
            </div>

            <div class="message-total">共{{ pagination.total }}条内容</div>

            <div class="notice-list" v-if="activeTab == 4" v-loading="isLoading">
                <template v-if="pagination.total > 0" v-for="item in list" :key="item.id">
                    <div class="notice-item" v-if="item.about_json.status == 2">
                        <p>尊敬的{{ userStore.userInfo.mobile }}用户：</p>
                        <p>您好！</p>
                        <p>
                            非常遗憾地通知您，您在华锐云空间提交的作品未能通过审核。审核不通过的原因如下：{{
                                item.about_json.reason || "-"
                            }}
                        </p>
                        <p>
                            请您根据反馈意见进行相应的修改和调整后，重新提交审核。我们期待您修改后的作品能够符合要求。
                        </p>
                        <p>感谢您对我们华锐云空间的支持与理解。</p>
                    </div>
                    <template v-else>
                        <div class="notice-item" v-if="item.id % 2 == 0">
                            尊敬的{{
                                userStore.userInfo.mobile
                            }}用户：特此通知您，您于华锐云空间提交的作品审核通过啦！您的作品将进入华锐云空间的展示序列，愿它能收获众多好评。感谢您选择华锐云空间，祝您使用愉快。
                        </div>
                        <div class="notice-item" v-else>
                            <p>尊敬的{{ userStore.userInfo.mobile }}用户：</p>
                            <p>您好！</p>
                            <p class="mb-10">
                                恭喜您，在华锐云空间提交的作品已通过审核。我们对您的创作表示认可和赞赏。您的作品将在华锐云空间展示，期待它能收获更多的关注与喜爱。感谢您的参与，华锐云空间与您一同成长。
                            </p>
                            <!-- <p>华锐云空间</p> -->
                        </div>
                    </template>
                </template>

                <el-empty :image-size="150" v-else-if="!isLoading" />
            </div>

            <!-- 私信 -->
            <div class="dialogue-list" v-else-if="activeTab == 5">
                <template v-if="pagination.total > 0" v-for="item in list" :key="item.id">
                    <div class="dialogue-item">
                        <div class="avatar" @click="GoToPageHome(item.user.id)">
                            <img :src="item.user.avatar || _defaultAvatar_" />
                        </div>

                        <div class="content">
                            <div class="top">
                                <div class="nickname">{{ item.user.nickname || item.user.mobile }}</div>
                                <div class="tag">与你私信</div>
                                <div class="time">{{ item.createtime }}</div>
                            </div>
                            <div class="bottom">
                                {{ item.message }}
                            </div>
                        </div>

                        <div class="btn-reply" @click="onDialogueReply(item.send_id)">回复</div>
                    </div>
                </template>
                <el-empty :image-size="150" v-else-if="!isLoading" />
            </div>

            <!-- 关注 -->
            <div class="follow-list" v-else-if="activeTab == 6">
                <template v-if="pagination.total > 0" v-for="item in list" :key="item.id">
                    <div class="follow-item">
                        <div class="avatar" @click="GoToPageHome(item.user.id)">
                            <img :src="item.user.avatar || _defaultAvatar_" />
                        </div>
                        <div class="content">
                            <div class="nickname">{{ item.user.nickname || item.user.mobile }} 关注了你</div>
                            <div class="time">{{ item.createtime }}</div>
                        </div>
                        <div :class="item.is_follow ? 'btn-unfollow' : 'btn-follow'"
                            @click="item.is_follow ? onUnFollow(item) : onFollow(item)">{{
                                item.is_follow ? '取消关注' : '回关' }}</div>
                    </div>
                </template>
                <el-empty :image-size="150" v-else-if="!isLoading" />
            </div>

            <div class="message-list" v-loading="isLoading" v-else>
                <template v-if="pagination.total > 0">
                    <template v-for="(item, index) in list" :key="item.id">
                        <div class="message-item">
                            <div class="avatar" @click="GoToPageHome(item.user.id)">
                                <img :src="item.user.avatar ||
                                    `${_oss_}images/user/default-avatar.png`
                                    " />
                            </div>

                            <div class="message-info">
                                <div class="info-cell info-cell-1">
                                    <div class="username">
                                        {{ item.user.nickname || item.user.mobile }}
                                    </div>
                                    <div class="text">
                                        {{
                                            { 1: "评论", 2: "点赞", 3: "收藏" }[
                                            activeTab
                                            ]
                                        }}了你的作品
                                    </div>
                                    <div class="time">
                                        {{ item.createtime }}
                                    </div>
                                </div>

                                <div class="info-cell info-cell-2" v-if="activeTab == 1"
                                    v-html="formatComment(item.comment)"></div>

                                <div class="info-cell info-cell-3">
                                    <span @click="GoToWork(item)">
                                        {{ item.work.name }}
                                    </span>
                                </div>

                                <div class="comment-tools" v-if="activeTab == 1">
                                    <CommentReplyWorkP :commentId="item.id" :toUid="item.uid" :toUName="item.user.nickname ||
                                        item.user.mobile
                                        " :workId="item.work_id" @success="GetReply(index)" />
                                </div>

                                <div v-if="activeTab == 1">
                                    <CommentReplyWorkListP :commentId="item.id" :workId="item.work_id" :list="item.reply"
                                        :authorId="userStore.userInfo.id" @replySuccess="GetReply(index)"
                                        @del="(item) => onDelReply(item, index)" v-if="item.reply && item.reply.length" />
                                </div>
                            </div>

                            <div class="info-cover" @click="GoToWork(item)">
                                <img :src="item.work.file +
                                    '?x-oss-process=image/watermark,image_' +
                                    toBase64(
                                        'water/logo_white.png?x-oss-process=image/resize,P_30'
                                    ) +
                                    ',g_center,t_60'
                                    " />
                            </div>
                        </div>
                    </template>
                </template>
                <el-empty :image-size="150" v-else-if="!isLoading" />
            </div>

            <div class="pagination-box">
                <el-pagination background layout="prev, pager, next, jumper" :total="pagination.total"
                    :page-size="pagination.size" :current-page="pagination.page" prev-text="上一页" next-text="下一页"
                    @current-change="pageChangeHandle" :hide-on-single-page="true" />
            </div>
        </div>
    </div>

    <DialogCommentDelP v-model:show="isShowDeleteDialog" :onConfirm="onDeleteConfirm" />
    <DialogDialogueP ref="dialogueDialogRef" />
</template>
<script setup>
import { useContent } from ".";
import { Follow, UnFollow } from "@/api";
const userStore = useUserStore();
const {
    list,
    tabList,
    activeTab,
    pagination,
    isLoading,
    isShowDeleteDialog,
    dialogueDialogRef,
    onTabClick,
    GetList,
    GetReply,
    SetRead,
    GoToWork,
    pageChangeHandle,
    formatComment,
    onDelReply,
    onDeleteConfirm,
    onDialogueReply
} = useContent();

const onFollow = async (item) => {
    if (userStore.isLogin) {
        const res = await Follow({ follow_id: item.consumer_id });
        if (res.code === 200) {
            item.is_follow = true;
            Message().success("关注成功");
        } else {
            Message().warning(res.msg);
        }
    } else {
        LoginModal();
    }
}

const onUnFollow = async (item) => {
    if (userStore.isLogin) {
        const res = await UnFollow({ follow_id: item.consumer_id });
        if (res.code === 200) {
            item.is_follow = false;
            Message().success("取消关注成功");
        } else {
            Message().warning(res.msg);
        }
    } else {
        LoginModal();
    }
}

await GetList();
await SetRead();
</script>
<style lang="scss" scoped>
.mb-10 {
    margin-bottom: 10px;
}

.page {
    background-color: #edf5fa;
    padding: 30px 0;

    .container {
        width: 1200px;
        margin: 0 auto;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;

        .message-head {
            .tit {
                font-size: 18px;
                font-weight: 500;
                color: #222226;
                line-height: 26px;
            }
        }

        .tab-list {
            display: flex;
            margin-top: 10px;

            .tab-item {
                line-height: 40px;
                text-align: center;
                margin-right: 40px;
                color: #777888;
                user-select: none;
                cursor: pointer;

                &.active {
                    font-weight: 500;
                    color: #222226;
                    border-bottom: 2px solid #222226;
                }
            }
        }

        .message-total {
            font-size: 14px;
            color: #999aaa;
            line-height: 20px;
            margin-top: 15px;
            margin-bottom: 8px;
        }

        .message-list {
            .message-item {
                display: flex;
                align-items: flex-start;
                margin: 16px 0;

                .avatar {
                    width: 42px;
                    height: 42px;
                    border-radius: 4px;
                    overflow: hidden;
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        object-fit: cover;
                        cursor: pointer;
                    }
                }

                .message-info {
                    width: 100%;
                    margin-left: 16px;
                    font-size: 14px;

                    .username {
                        color: #222226;
                        margin-right: 8px;
                    }

                    .info-cell {
                        margin-bottom: 6px;
                        line-height: 20px;

                        &:last-of-type {
                            margin-bottom: 0;
                        }

                        &-1 {
                            display: flex;
                            color: #99a;

                            .time {
                                margin-left: auto;
                            }
                        }

                        &-2 {
                            margin-top: 10px;
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            font-size: 14px;
                            line-height: 20px;
                            color: #111;
                            word-wrap: break-word;
                            word-break: break-word;

                            :deep(img[emoji-icon]) {
                                width: 24px;
                                height: 24px;
                            }
                        }

                        &-3 {
                            color: #888;

                            span {
                                cursor: pointer;
                            }
                        }
                    }
                }

                .info-cover {
                    width: 150px;
                    height: 80px;
                    align-self: center;
                    margin-left: 20px;
                    border-radius: 4px;
                    overflow: hidden;
                    cursor: pointer;
                    flex-shrink: 0;
                    align-self: flex-start;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        .notice-list {
            .notice-item {
                color: #333;
                font-size: 16px;
                line-height: 1.5em;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                padding: 20px;
                margin: 16px 0;
            }
        }

        .dialogue-list {
            .dialogue-item {
                display: flex;
                align-items: center;
                padding: 20px 0;
                border-bottom: 1px solid #F1F1F1;

                .avatar {
                    width: 42px;
                    height: 42px;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        object-fit: cover;
                        border-radius: 50%;
                        cursor: pointer;
                    }
                }

                .content {
                    width: 100%;
                    padding: 0 15px;

                    .top {
                        display: flex;
                        align-items: center;

                        .nickname {
                            color: #333;
                            font-size: 16px;
                        }

                        .tag {
                            font-size: 14px;
                            color: #666;
                            margin: 0 20px;
                        }

                        .time {
                            font-size: 14px;
                            color: #999;
                        }

                    }

                    .bottom {
                        font-size: 14px;
                        color: #333;
                        word-wrap: break-word;
                        word-break: break-all;
                        line-height: 20px;
                        margin-top: 16px;
                    }
                }

                .btn-reply {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 46px;
                    height: 26px;
                    background: #EBEDEF;
                    border-radius: 4px;
                    font-size: 14px;
                    color: #333333;
                    cursor: pointer;
                }
            }
        }

        .follow-list {
            .follow-item {
                display: flex;
                align-items: center;
                padding: 20px 0;
                border-bottom: 1px solid #F1F1F1;

                .avatar {
                    width: 42px;
                    height: 42px;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        object-fit: cover;
                        border-radius: 50%;
                        cursor: pointer;
                    }
                }

                .content {
                    width: 100%;
                    padding: 0 15px;
                    display: flex;
                    align-items: center;

                    .nickname {
                        color: #333;
                        font-size: 16px;
                    }

                    .time {
                        font-size: 14px;
                        color: #999;
                        margin-left: 20px;
                    }
                }

                .btn-follow,
                .btn-unfollow {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;

                    height: 26px;
                    padding: 0 10px;
                    border-radius: 4px;
                    font-size: 14px;
                    cursor: pointer;
                }

                .btn-unfollow {
                    background: #EBEDEF;
                    color: #333333;
                }

                .btn-follow {
                    background: #5085FB;
                    color: #fff;
                }
            }
        }
    }
}

.pagination-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {

            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
